<template>
  <div class="main" @mousedown="startDrag">
    <div class="operation-main" @click="closeVisiable = false">
      <div class="operation-header">
        <div class="user-visiable">
          <img src="../assets/yunwei/shezhi.png" alt="" v-if="!loginVisiable">
          <span v-if="!loginVisiable">{{ loginUsername }}</span>
        </div>
        <div class="soft-operation">
          <img @click="handleReduce();" src="../assets/yunwei/suoxiao.png" alt="">
          <img @click.stop="closeVisiable = !closeVisiable" src="../assets/yunwei/guanbi.png" alt="">
          <div class="leavePrompt" v-if="closeVisiable">
            <div class="sureArea" @click="handleClose()">
              确认关闭程序
            </div>
          </div>
        </div>
      </div>
      <div class="information-box">
        <div class="infor-layout">
          <div class="infor-area">
            <div class="title-box">
              <span class="title-xiaowu">Teosys</span>
              <span class="title-aiot">AIoT</span>
            </div>
            <div>
              <div class="login-layout" v-if="loginVisiable">
                <div class="choose-project" @click="handleCascaderClick()">
                  <!-- {{ chooseProject }} -->
                </div>
                <div class="choose-cascader" v-if="cascaderVisiable">
                  <p @click="cascaderItem('operation')">运维平台</p>
                  <p @click="cascaderItem('information')">数据平台</p>
                  <p @click="cascaderItem('support')">支持服务</p>
                </div>
                <div class="use-login-box">
                  <div class="account-area">
                    <input type="text" v-model="username" class="account-input" placeholder="请输入账号" spellcheck="false">
                  </div>
                  <div class="password-area">
                    <input type="password" v-model="password" class="password-input" placeholder="请输入密码"
                      @keyup.enter="handleLogin" spellcheck="false">
                  </div>
                </div>
                <div class="login-btn" @click="handleLogin()">
                  登录
                </div>
                <div class="describe-box">
                  <p>开启数字城市新时代</p>
                </div>
              </div>
              <div class="short-menu" v-else>
                <!-- <div class="choose-project" @click="handleCascaderClick()">
                  {{ chooseProject }}
                </div> -->
                <div class="short-layout">
                  <div class="menu-box">
                    <div class="menu-item" @click="fastEntry('project')">
                      <img src="../assets/yunwei/shigongguanli.png" alt="">
                    </div>
                    <span>工程中枢</span>
                  </div>
                  <div class="menu-box">
                    <div class="menu-item" @click="fastEntry('operation')">
                      <img src="../assets/yunwei/dapingjiankong.png" alt="">
                    </div>
                    <span>运维中心</span>
                  </div>
                  <div class="menu-box">
                    <div class="menu-item" @click="fastEntry('support')">
                      <img src="../assets/yunwei/zhichifuwu.png" alt="">
                    </div>
                    <span>服务平台</span>
                  </div>
                  <div class="menu-box">
                    <div class="menu-item" @click="fastEntry('tool')">
                      <img src="../assets/yunwei/peizhigongju.png" alt="">
                    </div>
                    <span>配置工具</span>
                  </div>
                </div>
                <div class="describe-box">
                  <p>开启数字城市新时代</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

const { ipcRenderer } = window.require('electron');
import { login } from '../api/api.js';

export default {
  name: "mainView",
  data() {
    return {
      loginVisiable: true,
      cascaderVisiable: false,
      // chooseProject: "国家科技传播中心",
      dragging: false,
      startX: 0,
      startY: 0,
      username: "",
      password: "",
      uuid: "",
      closeVisiable: false,
      loginUsername: "",
    };
  },
  activated() {
    this.staticFlag = false;
  },
  deactivated() {
    ipcRenderer.removeListener('from-main', this.handleMessage);
  },
  mounted() {
    // this.fetchUUID();
    ipcRenderer.on('open-front', this.handleMessage);
  },
  methods: {
    handleMessage(event, payload) {
      payload && this.fastEntry('project');
    },
    handleReduce() {
      ipcRenderer.send('window-minimize');
    },
    handleBlow() {
      ipcRenderer.send('window-toggle-fullscreen');
    },
    handleClose() {
      ipcRenderer.send('window-close');
    },
    startDrag(event) {
      const tag = event.target.tagName.toLowerCase();
      if (tag === 'input' || tag === 'textarea') {
        return;
      }
      if (event.target.closest('.menu-item')) {
        return;
      }
      this.dragging = true;
      ipcRenderer.send('window-move-start', {
        startX: event.screenX,
        startY: event.screenY
      });
      const moveHandler = (e) => {
        if (this.dragging) {
          ipcRenderer.send('window-move', {
            x: e.screenX,
            y: e.screenY
          });
        }
      };
      const stopDrag = () => {
        this.dragging = false;
        window.removeEventListener("mousemove", moveHandler);
        window.removeEventListener("mouseup", stopDrag);
      };
      window.addEventListener("mousemove", moveHandler);
      window.addEventListener("mouseup", stopDrag);
    },
    handleLogin() {
      if (!this.username) {
        this.$message.error('账号不能为空');
        return;
      }
      if (!this.password) {
        this.$message.error('密码不能为空');
        return;
      }
      let params = { username: this.username.trim(), password: this.password.trim() };
      login(params).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.loginUsername = res.data.username;
          this.loginVisiable = false;
        }
      })
    },
    fastEntry(entrance) {
      switch (entrance) {
        case 'project':
          // const frontBaseUrl = 'http://10.168.1.101/#/login';
          const frontBaseUrl = 'https://www.saasiot.cn/#/login';
          const frontLoginUrl = 'https://www.saasiot.cn/api/security/auth/login';
          const frontParams = new URLSearchParams({
            exe: 'true',
            username: this.username,
            password: this.password,
            loginUrl: frontLoginUrl,
          }).toString();
          ipcRenderer.send('open-front-window', {
            currentUrl: frontBaseUrl,
            loginUrl: frontParams,
          });
          break;
        case 'operation':
          const operationLoginUrl = 'https://www.saasiot.cn/api/security/auth/login';
          const operationParams = new URLSearchParams({
            exe: 'true',
            username: this.username,
            password: this.password,
            loginUrl: operationLoginUrl,
          }).toString();
          ipcRenderer.send('open-ops-window', {
            loginUrl: operationParams,
          });
          break;
        case 'support':
          // const supportBaseUrl = 'http://10.168.1.199:9091/#/login';
          const supportBaseUrl = 'https://xiaowu-iot.com/dist/#/login';
          const supportLoginUrl = 'https://www.xiaowu-iot.com/api/security/auth/login';
          const supportParams = new URLSearchParams({
            exe: 'true',
            username: '66',
            password: '1234',
            loginUrl: supportLoginUrl
          }).toString();
          ipcRenderer.send('open-support-window', {
            currentUrl: supportBaseUrl,
            loginUrl: supportParams,
          });
          break;
        case 'tool':
          this.openTool();
          break;
        default:
          break;
      }
    },
    handleCascaderClick() {
      // this.cascaderVisiable = !this.cascaderVisiable;
    },
    cascaderItem(val) {
      if (val == 'operation') {
        this.chooseProject = '运维平台';
      } else if (val == 'information') {
        this.chooseProject = '数据平台';
      } else if (val == 'support') {
        this.chooseProject = '支持服务';
      }
      this.cascaderVisiable = false;
    },
    async openTool() {
      const appPath = 'D:\\XW-keji\\welink_V2.08.exe';
      await ipcRenderer.invoke('open-local-tool', appPath);
    },
    async fetchUUID() {
      try {
        const uuid = await ipcRenderer.invoke('get-uuid');
        // this.uuid = uuid;
        console.log(uuid, 'uuid:');
      } catch (error) {
        console.log('failed uuid', error);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  color: #D0D0D0;
  border: 2px solid #454545;
  border-radius: 20px;
  overflow: hidden;

  .operation-main {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    background-color: #242424;
    flex-direction: column;

    .operation-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 25px;

      .user-visiable {
        display: flex;
        align-items: center;
        padding-left: 30px;

        img {
          width: 40px;
          height: 40px;
          cursor: pointer;
          z-index: 9;
        }

        span {
          font-size: 25px;
          letter-spacing: 2px;
          color: #7B818F;
          margin-left: 30px;
        }

      }

      .soft-operation {
        z-index: 99;
        position: relative;

        img {
          width: 26px;
          height: 26px;
          margin-right: 35px;
          cursor: pointer;
        }

        .leavePrompt {
          position: absolute;
          right: 3px;
          top: 50px;
          width: 170px;
          height: 80px;
          background-color: #242424;
          border: .1px solid #454545;
          border-radius: 10px;
          display: flex;
          justify-content: center;
          align-items: center;

          .sureArea {
            width: 150px;
            height: 60px;
            border-radius: 10px;
            background-color: #E84B30;
            font-size: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #DDDDDD;
            cursor: pointer;
          }
        }
      }
    }


    .information-box {
      flex: 1;

      .infor-layout {
        height: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        margin-top: -50px;

        .infor-area {
          width: 80%;
          height: 400px;
          border-radius: 10px;

          .title-box {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            margin-bottom: 0px;

            .title-xiaowu {
              margin-right: 25px;
              font-size: 65px;
              display: inline-block;
              background: linear-gradient(90deg, #70E5C8, #068EEA, #FFFFFF, #6DC7B1);
              background-size: 200%;
              -webkit-background-clip: text;
              color: transparent;
              animation: gradientAnimation 5s linear infinite;
              font-weight: 800;
              letter-spacing: 1px;
            }

            .title-aiot {
              font-size: 65px;
              display: inline-block;
              background: linear-gradient(90deg, #70E5C8, #068EEA, #FFFFFF, #6DC7B1);
              background-size: 200%;
              -webkit-background-clip: text;
              color: transparent;
              animation: gradientAnimation 5s linear infinite;
              font-weight: 700;
            }


            @keyframes gradientAnimation {
              0% {
                background-position: 200% 0%;
                /* 使背景从左开始 */
              }

              100% {
                background-position: 0% 0%;
                /* 使背景移动到右侧 */
              }
            }

            .title-referral {
              font-size: 20px;
              letter-spacing: 3px;
            }
          }

          .login-layout {
            margin-top: -20px;
            display: flex;
            flex-direction: column;

            .choose-project {
              margin-top: 12px;
              font-size: 32px;
              display: inline-block;
              background: linear-gradient(90deg, #70E5C8, #068EEA, #FFFFFF, #6DC7B1);
              background-size: 200%;
              -webkit-background-clip: text;
              color: transparent;
              animation: gradientAnimation 5s linear infinite;
              letter-spacing: 5px;
              align-self: center;
              font-weight: 600;
            }

            .choose-cascader {
              width: 320px;
              height: 200px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              background-color: #0D76FF;
              align-self: center;
              position: absolute;
              z-index: 99;
              top: 60px;
              border-radius: 20px;

              p {
                color: #D0D0D0;
                font-size: 25px;
                letter-spacing: 3px;
                margin-top: 10px;
                cursor: pointer;
              }
            }

            .use-login-box {
              width: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;

              .account-area {
                margin-top: 20px;

                input {
                  width: 320px;
                  height: 48px;
                  border-radius: 50px;
                  text-align: center;
                  letter-spacing: 3px;
                  font-size: 22px;
                  border: none;
                }
              }

              .password-area {
                margin-top: 20px;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                input {
                  width: 320px;
                  height: 48px;
                  border-radius: 50px;
                  text-align: center;
                  letter-spacing: 3px;
                  font-size: 22px;
                  border: none;
                }
              }
            }

            .login-btn {
              margin-top: 15px;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 25px;
              letter-spacing: 3px;
              color: #3189fc;
              align-self: center;
              cursor: pointer;
            }

            .describe-box {
              display: flex;
              justify-content: center;
              align-items: center;
              margin-top: 15px;

              p {
                font-family: 'MyFont', sans-serif;
                font-size: 40px;
                letter-spacing: 15px;
                color: #7B818F;
              }
            }
          }

          .short-menu {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #D0D0D0;
            flex-direction: column;

            .choose-project {
              font-size: 55px;
              display: inline-block;
              background: linear-gradient(90deg, #70E5C8, #068EEA, #FFFFFF, #6DC7B1);
              background-size: 200%;
              -webkit-background-clip: text;
              color: transparent;
              animation: gradientAnimation 5s linear infinite;
              letter-spacing: 5px;
              font-weight: 800;
              align-self: center;
            }

            .short-layout {
              width: 80%;
              display: flex;
              justify-content: space-between;
              flex-wrap: nowrap;
              align-items: center;
              margin-top: 50px;


              .menu-box {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                .menu-item {
                  width: 120px;
                  height: 120px;
                  background-color: #0D76FF;
                  border-radius: 35px;
                  margin-top: 20px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  cursor: pointer;

                  img {
                    width: 55px;
                    height: 55px;
                  }
                }

                span {
                  margin-top: 10px;
                  font-size: 24px;
                  letter-spacing: 2px;
                  color: #7B818F;
                }
              }
            }

            .describe-box {
              display: flex;
              justify-content: center;
              align-items: center;
              margin-top: 50px;

              p {
                font-family: 'MyFont', sans-serif;
                font-size: 40px;
                letter-spacing: 15px;
                color: #7B818F;
              }
            }
          }
        }
      }
    }
  }
}

@font-face {
  font-family: 'MyFont';
  src: url('../assets/font/Long_Cang/LongCang-Regular.ttf');
}
</style>
